<template>
  <div class="container">
    <header class="main-header">
      <ul class="header-wrap">
        <li class="header-left">
          <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/common/logo-banner.png" alt="" />
          <span>首页</span>
          <span>公告</span>
        </li>
        <li class="header-right">
          <a-input-search placeholder="探索更多" style="width: 160px; text-align: left" @search="onSearch" />
          <a-button type="primary" @click="goWirte"> 写文章 </a-button>
          <!-- <NuxtLink to="/login">登录</NuxtLink> -->
          <img class="header-img" src="https://mokr.oss-cn-hangzhou.aliyuncs.com/login/beta.png" alt="" />
        </li>
      </ul>
    </header>
    <main class="main-content">
      <Nuxt />
    </main>
    <footer class="main-footer">
      <ul class="footer-tips">
        <li class="footer-tips-left">
          <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/common/bottom-logo.png" alt="" />
          <p style="margin-top: 5px">OKR让我们更「聚焦」、更专注于我们团队的目标。</p>
          <p>OKR「激活」了团队成员，让团队主观能动性更强。通过它能找出精英同学，拉动中间同学，影响落后同学。</p>
        </li>
        <li class="footer-tips-right">
          <div class="link">
            <p><img class="wechat-card" src="~/assets/imgs/wechat_g.png" alt="" /></p>
            <p>邮箱地址：suhao755@gmail.com</p>
          </div>
        </li>
      </ul>
      <div class="copyright">
        ©1997-{{ new Date().getFullYear() }} suhoo版权所有
        <span class="copyright-addr">广东省深圳市罗湖区公安局宿舍7栋一单元</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isGuest: false,
    }
  },
  computed: {},
  methods: {
    onSearch() {},
    goWirte() {
      if (this.isGuest) {
        this.$router.push({
          path: 'login',
        })
        return
      }
      window.open('https://www.suhao.online/okr/uploadArticle')
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f4f5f5;
  .main-header {
    position: relative;
    height: 58px;
    line-height: 58px;
    background: #fff;
    .header-wrap {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      font-size: 17px;
      color: #333;
      max-width: 1056px;
      margin: 0 auto;
      padding: 0 40px;
      .header-left {
        flex: 1;
        cursor: pointer;
        img {
          height: 38px;
          margin-right: 8px;
        }
        span {
          margin-right: 28px;
        }
      }
      .header-right {
        flex: 1;
        text-align: right;
        cursor: pointer;
        button,
        img,
        a {
          margin-left: 18px;
        }
        .header-img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          object-fit: cover;
        }
      }
    }
  }
  .main-content {
    position: relative;
    max-width: 1056px;
    min-height: 680px;
    margin: 0 auto;
    background: #f5f5f5;
  }
  .main-footer {
    position: relative;
    width: 100%;
    background: #fff;
    .footer-tips {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #999;
      max-width: 1056px;
      margin: 0 auto;
      padding: 18px 40px;
      .footer-tips-left {
        flex: 1;
        border-right: 1px solid #eaeaea;
        img {
          height: 58px;
        }
      }
      .footer-tips-right {
        flex: 1;
        text-align: right;
      }
      .link {
        margin-top: 16px;
        line-height: 28px;
        .lin-margin {
          margin-right: 38px;
        }
        a {
          color: #999;
        }
        .wechat-card {
          width: 140px;
          height: 140px;
        }
      }
    }
    .copyright {
      height: 60px;
      line-height: 60px;
      font-size: 12px;
      color: #999;
      max-width: 1056px;
      margin: 0 auto;
      padding: 0 40px;
      border-top: 1px solid #f5f5f5;
      .copyright-addr {
        float: right;
      }
    }
  }
}
</style>
